<template>
  <view class="upload-container" @click="upload">

    <text>视频</text>

    <!-- <view class="upload" style="padding-top: 20px;padding-bottom: 10px">
      <view style="margin-left: 20px;margin-bottom: 10px">
        <input style="width: 150px;font-weight: bold;" type="file" id="fileUpload" @change="fileChange($event)">
        <label class="status">上传状态: <span>{{ statusText }}</span></label>
      </view>
      <view label="资源名称" style="width: 550px;margin-bottom: 10px;margin-top: 20px;margin-left: 10px">
        <input v-model="resource.name" style="width: 550px" />
      </view>
      <view class="upload-type">
        <button @click="authUpload" type="primary" :disabled="uploadDisabled">开始上传</button>
        <button @click="pauseUpload" :disabled="pauseDisabled">暂停</button>
        <button :disabled="resumeDisabled" type="primary" @click="resumeUpload">恢复上传</button>
        <text class="progress">上传进度: <i id="auth-progress">{{ authProgress }}</i> %</text>
      </view>
    </view> -->
  </view>
</template>
<script>
import http from '@/common/service/service'
export default {
  data() {
    return {
      resource: {
        type: 0,
        name: "",
        extensionName: "",
        linkId: ""
      },

      timeout: '',
      partSize: '',
      parallel: '',
      retryCount: '',
      retryDuration: '',
      userId: '1303984639806000',
      file: null,
      authProgress: 0,
      uploadDisabled: true,
      resumeDisabled: true,
      pauseDisabled: true,
      uploader: null,
      statusText: '',
    }
  },
  methods: {
    upload() {
      this.$emit('click')
      uni.chooseFile({
        count: 1, //默认1
        type: 'video',
        sourceType: ['album'], //从相册选择
        success: (res) => {
          this.file = res.tempFiles[0]
          this.resource.name = this.file.name
          this.resource.extensionName = 'mp4';
          
          let userData = '{"Vod":{}}'
          if (this.uploader) {
            this.uploader.stopUpload()
            this.authProgress = 0
            this.statusText = ""
          }
          this.uploader = this.createUploader()
          this.uploader.addFile(this.file, null, null, null, userData)
          this.uploadDisabled = false
          this.pauseDisabled = true
          this.resumeDisabled = true

          setTimeout(() => this.authUpload())
        },
        complete: () => {
          this.$emit('uniChooseComplete')
        }
      });
    },
    // 开始上传
    authUpload() {
      // 然后调用 startUpload 方法, 开始上传
      if (this.uploader !== null) {
        console.log("开始上传");
        this.uploader.startUpload()
        this.uploadDisabled = true
        this.pauseDisabled = false
      }
    },
    // 暂停上传
    pauseUpload() {
      if (this.uploader !== null) {
        this.uploader.stopUpload()
        this.resumeDisabled = false
        this.pauseDisabled = true
      }
    },
    // 恢复上传
    resumeUpload() {
      if (this.uploader !== null) {
        this.uploader.startUpload()
        this.resumeDisabled = true
        this.pauseDisabled = false
      }
    },
    // 创造上传器
    createUploader() {
      let self = this
      let uploader = new AliyunUpload.Vod({
        userId: "241372950770901844",
        region: "cn-shanghai",
        timeout: self.timeout || 60000,
        partSize: self.partSize || 1048576,
        parallel: self.parallel || 5,
        retryCount: self.retryCount || 3,
        retryDuration: self.retryDuration || 2,
        // 添加文件成功
        addFileSuccess: function (uploadInfo) {
          self.uploadDisabled = false
          self.resumeDisabled = false
          self.statusText = '添加文件成功, 等待上传...'
          console.log("addFileSuccess: " + uploadInfo.file.name)
        },
        // 开始上传
        onUploadstarted: function (uploadInfo) {
          // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
          // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
          // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
          if (!uploadInfo.videoId) {
            http.post("/demand/uploadVideo", {
              title: self.file.name,
              filename: self.resource.name,
              template: "ProjectVideoWatermark",
              userdescription: self.userdescription,
              project_id: 1
            }).then((res) => {
              self.resource.linkId = res.data.objectId
              console.log("res", res)
              let uploadAuth = res.data.uploadAuth;
              let uploadAddress = res.data.uploadAddress;
              let videoId = res.data.videoId;
              uploader.setUploadAuthAndAddress(
                uploadInfo,
                uploadAuth,
                uploadAddress,
                videoId
              );
            });
            self.statusText = "文件开始上传...";
            console.log(
              "onUploadStarted:" +
              uploadInfo.file.name +
              ", endpoint:" +
              uploadInfo.endpoint +
              ", bucket:" +
              uploadInfo.bucket +
              ", object:" +
              uploadInfo.object
            );
          } else {
            // 如果videoId有值，根据videoId刷新上传凭证
            let refreshUrl = "/project/video/refreshtoken?VideoID=" + uploadInfo.videoId;
            http.get(refreshUrl).then((data) => {
              console.log("结果",data);
              if (data.code === 200) {
                let uploadAuth = data.data.UploadAuth;
                let uploadAddress = data.data.UploadAddress;
                let videoId = data.data.VideoId;
                uploader.setUploadAuthAndAddress(
                  uploadInfo,
                  uploadAuth,
                  uploadAddress,
                  videoId
                );
              }
            });
          }
        },
        // 文件上传成功
        onUploadSucceed: function (uploadInfo) {
          self.$emit('succeed', uploadInfo) //? 无效
          console.log(uploadInfo);
          console.log("onUploadSucceed: " + uploadInfo.file.name + ", endpoint:" + uploadInfo.endpoint + ", bucket:" + uploadInfo.bucket + ", object:" + uploadInfo.object)
          self.statusText = '文件上传成功!'
        },
        // 文件上传失败
        onUploadFailed: function (uploadInfo, code, message) {
          console.log("onUploadFailed: file:" + uploadInfo.file.name + ",code:" + code + ", message:" + message)
          self.statusText = '文件上传失败!'
        },
        // 取消文件上传
        onUploadCanceled: function (uploadInfo, code, message) {
          console.log("Canceled file: " + uploadInfo.file.name + ", code: " + code + ", message:" + message)
          self.statusText = '文件已暂停上传'
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress: function (uploadInfo, totalSize, progress) {
          console.log("onUploadProgress:file:" + uploadInfo.file.name + ", fileSize:" + totalSize + ", percent:" + Math.ceil(progress * 100) + "%")
          let progressPercent = Math.ceil(progress * 100)
          self.authProgress = progressPercent
          self.statusText = '文件上传中...'
        },
        // 上传凭证超时
        onUploadTokenExpired: function (uploadInfo) {
          // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
          // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
          // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
          let refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
          http.get(refreshUrl).then(({ data }) => {
            let uploadAuth = data.UploadAuth
            uploader.resumeUploadWithAuth(uploadAuth)
            console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
          })
          self.statusText = '文件超时...'
        },
        // 全部文件上传结束
        onUploadEnd: function (uploadInfo) {
          console.log("onUploadEnd: uploaded all the files")
          self.statusText = '文件上传完毕'
        }
      })
      return uploader
    }
  }
}
</script>

<style>
</style>
